<template>
<dv-border-box-11 title="本周统计" id="dv-border-box-11" >
    <div id="week-flop">
      <div
        class="week-flop-item"
        v-for="item in digitalFlopData"
        :key="item.title"
      >
        <div class="week-flop-title">{{ item.title }}</div>
        <div class="week-flop-div">
          <!--<dv-decoration-9 style="width:60px;height:60px;color:#40faee;font-weight:bold;font-size:26px">{{item.number}}</dv-decoration-9>-->
          <dv-digital-flop
            :config="item.number"
            style="width:100px;height:50px;"
          />
        </div>
      </div>
    <!--<div class="week-flop-title">本周统计</div>-->
    </div>
  </dv-border-box-11>
</template>

<script>
export default {
  name: 'WeekFlop',
  data() {
    return {
      digitalFlopData: []
    }
  },
  methods: {
    async createData() {
      let applyCount = []
      let distCount = []
      let deliveryCount = []
      let purchaseCount = []
      await this.$ajax.get('/dept/apply/findThisWeekDeptApplyCount').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本周科室请领请购发生错误：${resp.msg}`)
          return
        }
        applyCount.push(resp.data)
      })
      await this.$ajax.get('/wm/dist/findThisWeekDistCount').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本周运营配送发生错误：${resp.msg}`)
          return
        }
        distCount.push(resp.data)
      })
      await this.$ajax.get('/wm/dist/findThisWeekDeliveryCount').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本周收货发生错误：${resp.msg}`)
          return
        }
        deliveryCount.push(resp.data)
      })
      await this.$ajax.get('/purchase/order/findThisWeekPurchaseCount').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本周订单发生错误：${resp.msg}`)
          return
        }
        purchaseCount.push(resp.data)
      })

      this.digitalFlopData = [
        {
          title: '请领/请购',
          number: {
            number: applyCount,
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: '#4d99fc',
              fontWeight: 'bold'
            }
          },
        },
        {
          title: '运营配送',
          number: {
            number: distCount,
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: '#f46827',
              fontWeight: 'bold'
            }
          },
        },
        {
          title: '收货',
          number: {
            number: deliveryCount,
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: '#40faee',
              fontWeight: 'bold'
            }
          },
        },
        {
          title: '订单',
          number: {
            number: purchaseCount,
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: '#67C23A',
              fontWeight: 'bold'
            }
          },
        }
      ]
    },
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 1800000)
  }
}
</script>

<style lang="scss">

#dv-border-box-11 {
  position: relative;
  height: 20%;
  width: 100%;
  margin-bottom: 1vh;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
}

#week-flop {
  padding-top: 7vh;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

    .week-flop-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 0.5vw;
    }

    .week-flop-title {
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;
    }


}
</style>
